import React, { Component, createRef } from 'react'
import { Form, Input, Select } from 'antd';
import './categories.css'



export default class addCAtegory extends Component {
    state = {
        selectVal: '',
        addCategroy:{
            parentId:0
        }
    }
    onValuesChange=(values)=>{
        // console.log(values);
        this.setState({
            addCategroy:{
                ...this.state.addCategroy,
                ...values
            }
        })
    }
    render() {
        const { Option } = Select;
        const  {data}  = this.props
        return (
            <div>

                <Form name="control-hooks" onValuesChange={this.onValuesChange}>
                    <Form.Item
                        name="name"
                        label="标签名称"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="type"
                        label="分类类型"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Select onChange={(value) => {
                            this.setState({
                                selectVal: value
                            })
                        }}>
                            <Option value="一级分类">一级分类</Option>
                            <Option value="二级分类">二级分类</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item noStyle >
                        {this.state.selectVal === '二级分类' ?
                            (<Form.Item
                                name="parentId"
                                label="分类父级"
                            >
                                <Select onChange={(value) => {
                                    this.setState({
                                        selectVal: value
                                    })
                                }}>
                                    {
                                        data.map(item => {
                                          if (item.type==='一级分类') {
                                            return <Option key={item._id} value={item._id}>{item.name}</Option>
                                          }
                                        })
                                    }
                                </Select>
                            </Form.Item>)
                            : ''

                        }
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
